<template>
  <div class="container">
    <el-card
      v-if="header"
      class="box-card"
      :style="'margin-bottom: ' + interval + 'px'"
      style="position: relative"
    >
      <div
        class="close"
        :style="'right:' + offsetX + 'px; top:' + offsetY + 'px;'"
      >
        <slot name="close"></slot>
      </div>
      <el-tabs v-model="active">
        <!-- 搜索区域 -->
        <el-tab-pane
          :label="title"
          name="title"
          style="overflow-y: visible !important"
        >
          <slot name="header"></slot>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 表体 -->
    <el-card
      v-if="main"
      class="box-card"
      :style="'margin-bottom: ' + interval + 'px'"
    >
      <div class="main">
        <slot name="main"></slot>
      </div>
      <div :style="'margin-top: ' + (interval + 10) + 'px'" class="footer">
        <slot name="footer"></slot>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "TableWrapper",
  props: {
    // 间距
    interval: {
      type: Number,
      default: 10,
    },
    // 标题内容
    title: {
      type: String,
      default: "",
    },
    // 是否显示表头
    header: {
      type: Boolean,
      default: true,
    },
    // 是否表示表体
    main: {
      type: Boolean,
      default: true,
    },
    offsetX: {
      type: Number,
      default: 25,
    },
    offsetY: {
      type: Number,
      default: 18,
    },
  },
  data() {
    return {
      active: "title",
    };
  },
};
</script>

<style lang="scss" scoped>
.close {
  position: absolute;
  z-index: 1;
}

.box-card::v-deep {
  /* 移除所有继承的样式 */
  overflow: unset;

  .el-tabs__content {
    overflow: visible;
  }
}
</style>